<!-- pages/gallery/gallery.vue -->
<template>
	<view class="gallery page-container">
		<text class="elegant-title">精美作品展示</text>
		
		<!-- 分类标签 -->
		<scroll-view scroll-x class="category-scroll">
			<view class="category-tags">
				<view v-for="(tag, index) in categories" :key="index"
						:class="['category-tag', currentCategory === index ? 'active' : '']"
						@tap="switchCategory(index)">
					{{tag}}
				</view>
			</view>
		</scroll-view>

		<!-- 瀑布流布局 -->
		<view class="gallery-grid">
			<view v-for="(item, index) in currentWorks" :key="index" 
					class="gallery-item" @tap="previewImage(item)">
				<view class="image-wrapper">
					<image :src="`http://localhost:8080/download/${item.image}`" mode="aspectFill" class="artwork-image"></image>
					<view class="image-overlay">
						<text class="image-title">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore" @tap="loadMore">
			<text>加载更多</text>
		</view>

		<!-- 添加筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @tap="showPriceFilter">
				<text>价格</text>
				<text class="arrow-down">▼</text>
			</view>
			<view class="filter-item" @tap="showStyleFilter">
				<text>风格</text>
				<text class="arrow-down">▼</text>
			</view>
			<view class="filter-item" @tap="showSortFilter">
				<text>排序</text>
				<text class="arrow-down">▼</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: ['全部', '婚纱系列', '礼服系列', '写真系列'],
				currentCategory: 0,
				works: [
					{ title: '法式浪漫', image: '/static/tab/logo.png', category: 0 },
					{ title: '梦幻公主', image: '/static/tab/logo.png', category: 1 },
					{ title: '优雅鱼尾', image: '/static/tab/logo.png', category: 1 },
					// ... 更多作品
				],
				page: 1,
				hasMore: true
			}
		},
		computed: {
			currentWorks() {
				if(this.currentCategory === 0) {
					return this.works
				}
				return this.works.filter(work => work.category === this.currentCategory)
			}
		},
		methods: {
			switchCategory(index) {
				if(this.currentCategory === index) return
				this.currentCategory = index
				// 切换分类时添加过渡动画
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
			previewImage(item) {
				uni.showToast({
					title: `查看 ${item.title}`,
					icon: 'none'
				})
			},
			loadMore() {
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					// 模拟加载更多数据
					this.page++
					if(this.page >= 3) {
						this.hasMore = false
					}
					uni.hideLoading()
				}, 1000)
			},
			loadCategories() {
				uni.request({
					url: API.CATEGORY_LIST,
					success: (res) => {
						if (res.data.code === 200) {
							this.categories = res.data.data.map(item => item.name)
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.category-scroll {
		background: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.category-tags {
		white-space: nowrap;
		padding: 0 20rpx;
	}

	.category-tag {
		display: inline-block;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: var(--text-color);
		background: var(--secondary-color);
		transition: all 0.3s;
	}

	.category-tag.active {
		background: var(--primary-color);
		color: #fff;
	}

	.gallery-grid {
		padding: 20rpx;
		column-count: 2;
		column-gap: 20rpx;
	}

	.gallery-item {
		break-inside: avoid;
		margin-bottom: 20rpx;
	}

	.image-wrapper {
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.artwork-image {
		width: 100%;
		height: 400rpx;
		background: #f5f5f5;
		transition: transform 0.3s;
	}

	.image-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: linear-gradient(transparent, rgba(0,0,0,0.6));
		transform: translateY(100%);
		transition: transform 0.3s;
	}

	.image-title {
		color: #fff;
		font-size: 26rpx;
	}

	.image-wrapper:active .artwork-image {
		transform: scale(1.05);
	}

	.image-wrapper:active .image-overlay {
		transform: translateY(0);
	}

	.load-more {
		text-align: center;
		padding: 30rpx;
		color: var(--text-color);
		font-size: 28rpx;
	}

	.filter-bar {
		display: flex;
		background: #fff;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.filter-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
	}

	.arrow-down {
		font-size: 24rpx;
		margin-left: 6rpx;
		color: #999;
	}
</style>